import {
  Form,
  DatePicker,
  TimePicker,
  Button,
  Input,
  Icon,
  Tag,
  Table,
  message,
} from 'antd';
import { connect } from 'dva';
import { creator } from '@/utils/creator';
import router from 'umi/router';
import React from 'react';
import AliyunOSSUpload from '@/utils/AliyunOSSUpload';
const Item = Form.Item;

const { MonthPicker, RangePicker } = DatePicker;

class TimeRelatedForm extends React.Component {
  state = {
    value: '',
  };
  componentDidMount() {
    this.getAllCats();
  }

  getAllCats = () => {
    const { dispatch } = this.props;
    dispatch(creator('category/getCats'));
  };
  add = () => {
    const { dispatch } = this.props;
    this.props.form.validateFields(async (err, values) => {
      if (err) {
        return;
      }
      await dispatch(
        creator('category/add', {
          name: values.name,
          iconUrl: values.iconUrl[0].url,
        }),
      );
      this.props.form.resetFields();
      await dispatch(creator('category/getCats'));
    });
  };
  showCategoryList = tag => {
    router.push({
      pathname: '/goods/list',
      query: { tag },
    });
  };
  // 确认更换图标
  confirm = async id => {
    const { dispatch } = this.props;
    const iconUrlArr = this.props.form.getFieldValue(id);
    if (!(iconUrlArr && iconUrlArr.length)) {
      message.error('请上传图标');
      return;
    }
    await dispatch(
      creator('category/updateCatInfo', { id, iconUrl: iconUrlArr[0].url }),
    );
    await this.getAllCats();
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    const { categoryList } = this.props.category;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 10 },
      },
    };
    const config = {
      rules: [
        { type: 'object', required: true, message: 'Please select time!' },
      ],
    };
    const rangeConfig = {
      rules: [
        { type: 'array', required: true, message: 'Please select time!' },
      ],
    };
    const columns = [
      {
        title: '图标',
        dataIndex: 'iconUrl',
        render: (text, record) => (
          <div style={{ display: 'flex' }}>
            <div>
              当前图标：
              {text && <img src={text} style={{ width: 80, height: 80 }} />}
            </div>
            <div style={{ marginLeft: 10 }}>
              {getFieldDecorator(record.id, {
                // rules: [{ required: true, message: '请上传' }],
              })(<AliyunOSSUpload />)}
              <Button
                type="primary"
                onClick={this.confirm.bind(this, record.id)}
                style={{ marginTop: 10 }}
              >
                确认
              </Button>
            </div>
          </div>
        ),
      },
      {
        title: '分类',
        dataIndex: 'name',
        render: text => (
          <a target='_blank' href={`/goods/list?tag=${text}`}>{text}</a>
        ),
      },
    ];
    return (
      <Form {...formItemLayout}>
        <Item label="分类图标">
          {getFieldDecorator('iconUrl', {
            rules: [{ required: true, message: '请上传' }],
          })(<AliyunOSSUpload />)}
        </Item>
        <Item label="分类名">
          {getFieldDecorator('name', {
            rules: [{ required: true, message: '请输入' }],
          })(<Input />)}
        </Item>

        <Item>
          <Button onClick={this.add}>添加</Button>
        </Item>

        <Item>
          <h2>已存在品类</h2>
          {categoryList.map(item => (
            <Tag
              onClick={this.showCategoryList.bind(this, item.name)}
              key={item._id}
            >
              {item.name}({item.count})
            </Tag>
          ))}
        </Item>
        <Table
          rowKey="id"
          dataSource={categoryList}
          columns={columns}
          scroll={{ y: '65vh' }}
          pagination={{
            total: categoryList.length,
            showTotal: total => `共${total}个品类`,
          }}
        />
      </Form>
    );
  }
}

const WrappedTimeRelatedForm = Form.create({ name: 'time_related_controls' })(
  TimeRelatedForm,
);

export default connect(({ category }) => ({ category }))(
  WrappedTimeRelatedForm,
);
